<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" inline style="margin-top: 50px">
      <el-form-item label="题干">
        <el-input v-model="quest" />
      </el-form-item>
      <el-select v-model="radio" placeholder="请选择状态" style="margin-left: 10px">
        <el-option label="选择" value="1" />
        <el-option label="填空" value="2" />
      </el-select>
      <el-form-item>
        <el-button type="primary" style="margin-left: 10px" @click="onSubmit">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addDialogVisible=true">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 95%;margin-left: 30px"
      border
    >
      <!--      <el-table-column type="expand">-->
      <!--        <template slot-scope="props">-->
      <!--          <el-form label-position="left" inline class="demo-table-expand">-->
      <!--            <el-form-item label="名称" style="display: block">-->
      <!--              <span>{{ props.row.name }}</span>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="描述" style="display: block">-->
      <!--              <span>{{ temp.text }}</span>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="单价" style="display: block">-->
      <!--              <span>{{ temp.price }}</span>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="总销售数量" style="display: block">-->
      <!--              <span>{{ props.row.address }}</span>-->
      <!--            </el-form-item>-->
      <!--          </el-form>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        prop="name"
        label="题干"
        width="800"
      />
      <el-table-column
        prop="address"
        label="类型"
      />
      <el-table-column
        label="操作"
        width="180"
      >
        <template>
          <el-button type="text" @click="addQueDialogVisible=true">加入题库</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="addQueDialogVisible"
      title="加入题库"
      left
    >
      <el-tree :data="data" show-checkbox :props="defaultProps" @node-click="handleNodeClick" />
      <div slot="footer" class="dialog-footer">
        <el-button type="text" style="float: left">
          新建题库
        </el-button>
        <el-button type="primary">
          加入题库
        </el-button>
        <el-button @click="addQueDialogVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="centerDialogVisible"
      title="课程详情"
      left
    >
      <el-form :model="form">
        <el-form-item label="名称" label-width="100px">
          <!--          <el-input v-model="form.name" autocomplete="off" readonly width="120px"></el-input>-->
          {{ form.name }}
        </el-form-item>
        <el-form-item label="描述" label-width="100px" readonly>
          <!--          <el-input v-model="form.text" autocomplete="off" width="150px" readonly />-->
          {{ form.text }}
        </el-form-item>
        <el-form-item label="单价" label-width="100px" readonly>
          <!--          <el-input v-model="form.price" autocomplete="off" width="150px" readonly />-->
          {{ form.price }}
        </el-form-item>
        <el-form-item label="总销售数量" label-width="100px" readonly>
          <!--          <el-input v-model="form.num" autocomplete="off" width="150px" readonly />-->
          {{ form.num }}
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="centerDialogVisible = false">确定</el-button>
      </span>
    </el-dialog>

    <!--    添加功能-->
    <el-dialog
      :visible.sync="addDialogVisible"
      title="添加题目"
      left
      width="40%"
    >
      <el-form :model="form">
        <el-form-item label="类型" label-width="100px">
          <el-select v-model="temp.type" style="width: 80%" placeholder="选择类型">
            <el-option label="填空" value="1" />
            <el-option label="选择" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="题干" label-width="100px">
          <el-input v-model="form.addSaleNum" type="textarea" style="width: 80%" placeholder="请输入题干" />
          <el-button style="margin-left: 10px;margin-bottom: 10px" type="primary">语音上传</el-button>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-input v-model="form.a" style="width: 80%" />
          <template slot="label">
            <el-radio v-model="radio">选项a</el-radio>
          </template>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-input v-model="form.b" style="width: 80%" />
          <template slot="label">
            <el-radio v-model="radio2">选项b</el-radio>
          </template>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-input v-model="form.c" style="width: 80%" />
          <template slot="label">
            <el-radio v-model="radio3">选项c</el-radio>
          </template>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-input v-model="form.d" style="width: 80%" />
          <template slot="label">
            <el-radio v-model="radio4">选项d</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="解析" label-width="100px">
          <el-input v-model="form.reason" type="textarea" style="width: 80%" placeholder="请输入题干" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addDialogVisible = false">加入题库</el-button>
        <el-button @click="addDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data() {
    return {
      addQueDialogVisible: false,
      value: '',
      value1: '',
      radio: '1',
      radio2: '',
      radio3: '',
      radio4: '',
      quest: '',
      centerDialogVisible: false,
      addDialogVisible: false,
      form: {
        reason: '',
        region: '1',
        name: '拉拉啦',
        addname: '',
        addnum: '',
        addprice: '',
        addtext: '',
        addSaleNum: '',
        addSaleMan: '',
        num: '100',
        price: '100',
        text: '好东西',
        teacher: '',
        a: '',
        b: '',
        c: '',
        d: ''
      },
      data: [{
        label: '简单题库'
      }, {
        label: '中等题库'
      }, {
        label: '困难题库'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      temp: {
        text: 'dsdad',
        price: 'dsda'
      },
      tableData: [{
        name: '我国的京剧脸谱色彩含义丰富，红色一般表示忠勇侠义，白色一般表示阴险奸诈，那么黑色一般表示？',
        address: '选择'
      }, {
        name: '“月上柳梢头，人约黄昏后”描写的是哪个传统节日？',
        address: '选择'
      }, {
        name: '我国古代有很多计量单位，比如诗句“黄河远上白云间，一片孤城万仞山”中的“仞”，一仞约相当于？',
        address: '选择'
      }, {
        name: '我国铁路部门规定身高多少的儿童要买全票?',
        address: '填空'
      }]
    }
  }
}
</script>

<style scoped>
</style>

